//客户端

//全局设置axios拦截器
axios.interceptors.request.use(
    (config)=>{ //这个回调函数 在每次发请求到服务器端之前 都会调用执行
        //设置请求头参数
        config.headers['Authorization'] = 'Bearer' + '' + localStorage.getItem('token')
        return config
    },
    (error)=>{
        return Promise.reject(error)
    }
)

//获取搜索按钮和输入框
let searchBtn = document.querySelector('.inputbox button')
let inputeEle = document.querySelector('.inputbox input')

//获取localStorage中存储的用户信息
let userinfo = JSON.parse( localStorage.getItem('userinfo') )
//渲染用户信息到首页
document.querySelector('.username').innerHTML = userinfo.name


//点击搜索按钮，发起ajax请求，传参数给服务器端，服务器端返回搜索的结果
searchBtn.onclick = ()=>{
    axios.get('/user/search' , { params:{ searchkey:inputeEle.value} }).then((res)=>{
        render(res.data.list) 
        console.log(res.data);
     })
}

//给tbody绑定点击事件（事件委托）
let tabody = document.querySelector('table')
tabody.onclick = (e)=>{
    //e.target.tagName == 'SPAN'判断是不是span标签
    //e.target.classList.contains('icon-shanchu') 判断是不是包含icon-shanchu 这个类名
    if( e.target.tagName == 'SPAN' && e.target.classList.contains('icon-shanchu') ){
        //先获取这个删除按钮对应用户的手机号
        //发起删除请求 ， 删除服务器端的这个用户
        // console.log(e.target.dataset.phone);
        axios.post( '/user/delete' , { phone:e.target.dataset.phone } ).then((res)=>{
            console.log(res.data);
            //如果想要在发请求给服务器，删除成功之后，同时让页面也看到删除后的效果，有两种方案
            //方案一：本地删除这个dom节点
            //e.target.parentNode.parentNode.remove()
            //方案二：让删除接口 返回删除后的新数据 本地调用render方法重新渲染
            render(res.data.list)
        })
    }
}

//渲染列表
function render(data) {
    let str = ''
    str = data.map((item, index) => {
        return `
        <tr>
            <td>${item.email}</td>
            <td>${item.name}</td>
            <td>${item.phone}</td>
            <td>${item.ingroup}</td>
            <td>${item.isadmin ? '是' : '否'}</td>
            <td> <span class="statusok ${item.status?'':'error'}">${item.status ? '正常' : '异常'}</span> </td>
            <td> <span class="iconfont icon-bianji"></span> <span class="iconfont icon-shanchu" data-phone="${item.phone}"></span> </td>
        </tr>
        `
    }).join('')
    if( str == '' ){
        str = `
        <tr>
        <td style = "text-align:center;color:red">
        未查询到数据!
        </td>
        </tr>`
    }
    document.querySelector('tbody').innerHTML = str

}

//axios是从axios.min.js文件中暴露的 用来发送ajax请求的一个对象 //res是服务器端返回的数据
//{ params:{} } 携带参数的语法
axios.get('/user/list', { params: { page:1,count:2 } ,handers: {}  } ).then((res)=>{
    //调用render方法, 传入后端返回的数据 渲染列表
    render( res.data.list );
    console.log(res.data);
})


